<template>
  <div class="overlay"  :style="'z-index:2000;background: rgba(255,255,255,.4);display: ' + (state.isOverlay? 'block': 'none')" @click="closeOverLay($event)">
    <component :is="current[state.OverlayName]" :params="state.OverlayParams"></component>
  </div>
</template>

<script setup>
    import addUnion from "./components/AddUnion/index.vue";
    import ActivationAddress from "./components/ActivationAddress/index.vue";
    import AddCard from "./components/AddCard/index.vue";
    import OpenBlindBoxResult from "./components/OpenBlindBoxResult/index.vue";
    import DissolutionUnion from './components/DissolutionUnion/index.vue'

    import { useStore} from 'vuex'
    const { state,commit}  =  useStore();
    const current = {
        addUnion,
        ActivationAddress,
        AddCard,
        OpenBlindBoxResult,
        DissolutionUnion
    };
    const closeOverLay = (e) => {
        let isTrue  = e.target.className.includes('overlay')?false: state.isOverlay;
        commit('changeOverlay', isTrue)
    }
</script>

<style scoped lang="scss">
  .overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
